<template>
	<div class="zh-time">
		<nav-header></nav-header>
		<div class="zh-canvaes"
			v-loading="loading.status"
    		:element-loading-text="loading.txt"
			v-loading.fullscreen.lock="loading.full">
			<div class="zh-h3" style="margin-top:0">同步设置</div>
			<div class="zh-clock clear">
				<div class="zh-local">
					<div class="zh-local-test">本地时间</div>
					<div class="zh-local-show">{{setTime | serverTime}}</div>
					<div :style="cssClock">
						<div :style="cssDotWrap">
							<div 
								:style="Object.assign({},{
									transform: 'rotateZ('+i*6+'deg)',
									width: i%5==0?'2px':'1px',
									height: i%5==0?'12px':'8px',
									backgroundColor: i%5==0?'red':'black',
									transformOrigin: '0px 100px'
								},cssDot)" 
								v-for="(dot,i) in 60"
                                :key="i"
							></div>
						</div>
						<div 
							:style="Object.assign({},{
								width: '3px',
								height: '50px',
								top: '50px',
								marginLeft: '-2px',
								backgroundColor: 'black',
								transform: 'rotateZ('+hour+'deg)'
							},cssNeedle)"
						></div>
						<div 
							:style="Object.assign({},{
								width: '2px',
								height: '70px',
								top: '30px',
								marginLeft: '-1px',
								backgroundColor: 'black',
								transform: 'rotateZ('+min+'deg)'
							},cssNeedle)"
						></div>
						<div 
							:style="Object.assign({},{
								width: '2px',
								height: '80px',
								top: '20px',
								marginLeft: '-1px',
								backgroundColor: 'red',
								transform: 'rotateZ('+sec+'deg)'
							},cssNeedle)"
						></div>
					</div>
				</div>
				<div class="zh-server">
					<div class="zh-local-test">服务器时间</div>
					<div class="zh-local-show">{{linuxTime | serverTime}}</div>
					<div :style="cssClock">
						<div :style="cssDotWrap">
							<div 
								:style="Object.assign({},{
									transform: 'rotateZ('+i*6+'deg)',
									width: i%5==0?'2px':'1px',
									height: i%5==0?'12px':'8px',
									backgroundColor: i%5==0?'red':'black',
									transformOrigin: '0px 100px'
								},cssDot)" 
								v-for="(dot,i) in 60"
                                :key="i"
							></div>
						</div>
						<div 
							:style="Object.assign({},{
								width: '3px',
								height: '50px',
								top: '50px',
								marginLeft: '-2px',
								backgroundColor: 'black',
								transform: 'rotateZ('+linuxhour+'deg)'
							},cssNeedle)"
						></div>
						<div 
							:style="Object.assign({},{
								width: '2px',
								height: '70px',
								top: '30px',
								marginLeft: '-1px',
								backgroundColor: 'black',
								transform: 'rotateZ('+linuxmin+'deg)'
							},cssNeedle)"
						></div>
						<div 
							:style="Object.assign({},{
								width: '2px',
								height: '80px',
								top: '20px',
								marginLeft: '-1px',
								backgroundColor: 'red',
								transform: 'rotateZ('+linuxsec+'deg)'
							},cssNeedle)"
						></div>
					</div>
				</div>
			</div>
			<el-button type="primary" :disabled="saveTransformSetFlag" @click="saveTimeConfirm(1)">同步时间</el-button>

			<div class="zh-date-time">
				<div class="zh-h3">直接时间</div>
				<div class="zh-dateTime-color">请选择日期时间</div>
                <el-date-picker
                    v-model="saveTimetime"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择日期时间">
                </el-date-picker>
			    <span class="zh-dateTime-color">（如：2018-07-03 18:00:00）</span>
			</div>
			<el-button type="primary" :disabled="saveTransformSetFlag" @click="saveTimeConfirm(2)">设置时间</el-button>
		</div>
	</div>
</template>
<script>
	export default {
	    data() {
			return {
        saveTransformSetFlag: sessionStorage.getItem('CheckSchoolAppCode') == '00000000000000000000000000000000' ? false : true,
				cssClock: {//整个钟的盒子
					position: 'absolute',
					width: '200px',
					height: '200px',
					border: '2px solid black',
					borderRadius: '50%',
				},
				cssDotWrap: {//装刻度的盒子
					transform: 'translateX(100px)',
				},
				cssDot: {//刻度们
					position: 'absolute',
				},
				cssNeedle: {//三根针
					position: 'absolute',
					left: '100px',
					transformOrigin: 'center bottom',
				},
				setTime: new Date(),//当前日期对象
				linuxTime:null,
				saveTimetime: '',
				localTiemOut:null,
				serverTiemOut:null,
				loading:{
					status:false,
					txt:'获取数据...',
					full:false,
				}
			}
		},
		computed: {
			sec() {//将当前秒数转化为秒针旋转的度数
				return this.setTime.getSeconds()*6;
			},
			min() {//将当前的分钟数转化为分针旋转的度数
				return this.setTime.getMinutes()*6 + this.setTime.getSeconds()/10 ;
			},
			hour() {//将当前的小时数转化为时针旋转的度数
				return this. setTime.getHours()*30 + this.setTime.getMinutes()/2;
			},
			linuxsec() {//将当前秒数转化为秒针旋转的度数
				return new Date(this.linuxTime*1000).getSeconds()*6;
			},
			linuxmin() {//将当前的分钟数转化为分针旋转的度数
				return new Date(this.linuxTime*1000).getMinutes()*6 + new Date(this.linuxTime*1000).getSeconds()/10 ;
			},
			linuxhour() {//将当前的小时数转化为时针旋转的度数
				return new Date(this.linuxTime*1000).getHours()*30 + new Date(this.linuxTime*1000).getMinutes()/2;
			}
		},
		created() {
			this.getServerTime();
			this.localTiemOut = setInterval(()=>{//钩子函数，在实例创建的时候运行定时器，我们只需要动态刷新当前的日期对象即可
				this.setTime = new Date();
				
			},1000)
			this.serverTiemOut =setInterval(()=>{//钩子函数，在实例创建的时候运行定时器，我们只需要动态刷新当前的日期对象即可
				if( typeof(this.linuxTime) == 'number' ){
					this.linuxTime = this.linuxTime+1;
				}
			},1000)
			
		},
		methods: {
			getServerTime(){
				this.loading.status = true;
				this.loading.txt = '获取数据...';
				this.loading.full = false;
				let success = ( data =>{
					this.loading.status = false;
					this.linuxTime = data.data;
				})
				let fail = ( data =>{
					this.loading.status = false;
					this.$message.error(data.msg)
				})
				this.$ajax.get('api/system/server_time',{params:{},func:{success:success,fail:fail}})
			},
			saveTimeConfirm( type = 1 ){
				if(type === 1){
					let yes = ( data => {
						this.saveTime();
					})
					let cancel = ( data => {})
					this.e_confirm({yes:yes,cancel:cancel,txt:'确定要同步本地时间到服务器时间吗？'});
				}else if(type ===2){
					if(!this.saveTimetime){
						this.$message.warning("请选择日期时间")
						return false;
					}
					let yes = ( data => {
						this.setOtherTime();
					})
					let cancel = ( data => {})
					this.e_confirm({yes:yes,cancel:cancel,txt:'确定要修改服务器时间吗？'});
				}
            },
            setOtherTime() {
                this.loading.status = true;
				this.loading.txt = '设置中...';
                this.loading.full = true;
                
				var ddd = setTimeout(() => {
					this.$message.success('操作成功')
		        	this.loading.status = false;
		        	this.getServerTime();
                }, 3000)
                
				let fail = ( data =>{
					clearInterval(ddd);
					this.loading.status = false;
					this.$message.error(data.msg)
				})
				
				this.$ajax.post('api/system/time_set', {time: this.saveTimetime}, {func: {fail: fail}})
            },
			saveTime( param = null ){
				this.loading.status = true;
				this.loading.txt = '设置中...';
				this.loading.full = true;
				param = timestampToTime(param);
				var ddd = setTimeout(() => {
					this.$message.success('操作成功')
		        	this.loading.status = false;
		        	this.getServerTime();
		        }, 5000)
				let fail = ( data =>{
					clearInterval(ddd);
					this.loading.status = false;
					this.$message.error(data.msg)
				})
				
				this.$ajax.post('api/system/time_set',{time:param},{func:{fail:fail}})
			}
		},
 		//离开页面之前
		beforeRouteLeave (to, from, next) {
			clearInterval(this.localTiemOut)
			clearInterval(this.serverTiemOut)
		},
		beforeDestroy (){
			clearInterval(this.localTiemOut)
			clearInterval(this.serverTiemOut)
		},
		filters: {
		   	serverTime( timeParam  ){
		   		if(timeParam === null ){
		   			return false;
		   		}
		   		if( typeof(timeParam) == 'number'  ){
		   			timeParam = new Date(timeParam*1000)
		   		}
		   		
		        let year = timeParam.getFullYear()
		        let month = timeParam.getMonth() + 1
		        let date = timeParam.getDate() <10 ? '0' + timeParam.getDate() : '' + timeParam.getDate()
		        let hour = timeParam.getHours()<10 ? '0' + timeParam.getHours() : '' + timeParam.getHours()
		        let minutes = timeParam.getMinutes()<10 ? '0' + timeParam.getMinutes() : '' + timeParam.getMinutes()
		        let seconds = timeParam.getSeconds()<10 ? '0' + timeParam.getSeconds() : '' + timeParam.getSeconds()
		        let day = timeParam.getDay()
		        switch(day){
		        	case 0:
		        		day = '星期日'
		        		break
		        	case 1:
		        		day = '星期一'
		        		break
		        	case 2:
		        		day = '星期二'
		        		break
		        	case 3:
		        		day = '星期三'
		        		break
		        	case 4:
		        		day = '星期四'
		        		break
		        	case 5:
		        		day = '星期五'
		        		break
		        	case 6:
		        		day = '星期六'
		        		break
		        }
		        return  year+ '年' + month + '月' + date + '日' + '  ' + hour + ':' + minutes + ':' + seconds + '  ' + day
		   }
		}
	}
</script>
<style lang="scss">
	.zh-time {
		.zh-clock {
			margin-top: 50px;
			.zh-local, .zh-server {
				position: relative;
				float: left;
				width: 212px;
				height: 350px;
			}
			.zh-local-show {
				padding: 30px 0 20px;
				text-align: center;
				color: #536195;
			}
			.zh-server {
				margin-left: 130px;
			}
			.zh-local-test {
				margin-left: 5px;
				color: #999;
			}
		}
		.zh-h3 {
			margin-top: 18px;
			font-weight: 600;
		}
		.zh-date-time {
			padding: 36px 0 20px;
			.zh-dateTime-color {
				padding: 28px 0 20px;
				color: #999;
			}
		}
	}
</style>